<template>
  <div>
    <el-form class="detail-form-content" ref="ruleForm" :model="ruleForm" label-width="80px"
      style="background: transparent;">
      <el-row>
        <el-col :span="12">
          <el-form-item v-if="flag == 'jiangshi'" label="讲师工号" prop="jiangshigonghao">
            <el-input v-model="ruleForm.jiangshigonghao" readonly placeholder="讲师工号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'jiangshi'" label="讲师姓名" prop="jiangshixingming">
            <el-input v-model="ruleForm.jiangshixingming" placeholder="讲师姓名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'jiangshi'" label="性别" prop="xingbie">
            <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
              <el-option v-for="(item, index) in jiangshixingbieOptions" v-bind:key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="flag == 'jiangshi'" label="照片" prop="zhaopian">
            <file-upload tip="点击上传照片" action="file/upload" :limit="3" :multiple="true"
              :fileUrls="ruleForm.zhaopian ? ruleForm.zhaopian : ''" @change="jiangshizhaopianUploadChange"></file-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'jiangshi'" label="年龄" prop="nianling">
            <el-input v-model="ruleForm.nianling" placeholder="年龄" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'jiangshi'" label="联系电话" prop="lianxidianhua">
            <el-input v-model="ruleForm.lianxidianhua" placeholder="联系电话" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'jiangshi'" label="教学方向" prop="jiaoxuefangxiang">
            <el-input v-model="ruleForm.jiaoxuefangxiang" placeholder="教学方向" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'jiangshi'" label="学历认证" prop="xuelirenzheng">
            <el-input v-model="ruleForm.xuelirenzheng" placeholder="学历认证" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'jiangshi'" label="入职时间" prop="ruzhishijian">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="ruleForm.ruzhishijian"
              type="date" placeholder="入职时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="学号" prop="xuehao">
            <el-input v-model="ruleForm.xuehao" readonly placeholder="学号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="姓名" prop="xingming">
            <el-input v-model="ruleForm.xingming" placeholder="姓名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="性别" prop="xingbie">
            <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
              <el-option v-for="(item, index) in xueyuanxingbieOptions" v-bind:key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="flag == 'xueyuan'" label="头像" prop="touxiang">
            <file-upload tip="点击上传头像" action="file/upload" :limit="3" :multiple="true"
              :fileUrls="ruleForm.touxiang ? ruleForm.touxiang : ''" @change="xueyuantouxiangUploadChange"></file-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="班级" prop="banji">
            <el-input v-model="ruleForm.banji" placeholder="班级" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="年龄" prop="nianling">
            <el-input v-model="ruleForm.nianling" placeholder="年龄" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="手机" prop="shouji">
            <el-input v-model="ruleForm.shouji" placeholder="手机" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="生源" prop="shengyuan">
            <el-select v-model="ruleForm.shengyuan" placeholder="请选择生源">
              <el-option v-for="(item, index) in xueyuanshengyuanOptions" v-bind:key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="学习课程" prop="xuexifangxiang">
            <el-select v-model="ruleForm.xuexifangxiang" placeholder="请选择学习课程">
              <el-option v-for="(item, index) in xueyuanxuexifangxiangOptions" v-bind:key="index" :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="就业状态" prop="jiuyezhuangtai">
            <el-select v-model="ruleForm.jiuyezhuangtai" placeholder="请选择就业状态">
              <el-option v-for="(item, index) in xueyuanjiuyezhuangtaiOptions" v-bind:key="index" :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="公司名称" prop="jiuyexinxi">
            <el-input v-model="ruleForm.jiuyexinxi" placeholder="公司名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="入学时间" prop="ruxueshijian">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="ruleForm.ruxueshijian"
              type="date" placeholder="入学时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="毕业时间" prop="biyeshijian">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="ruleForm.biyeshijian"
              type="date" placeholder="毕业时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="出生日期" prop="chushengriqi">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="ruleForm.chushengriqi"
              type="date" placeholder="出生日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag == 'xueyuan'" label="家庭住址" prop="jiatingzhuzhi">
            <el-input v-model="ruleForm.jiatingzhuzhi" placeholder="家庭住址" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-form-item v-if="flag == 'users'" label="用户名" prop="username">
          <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="onUpdateHandler">修 改</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isMobile, isPhone, isURL, checkIdCard } from "@/utils/validate";

export default {
  data() {
    return {
      ruleForm: {},
      flag: '',
      usersFlag: false,
      jiangshixingbieOptions: [],
      xueyuanxingbieOptions: [],
      xueyuanshengyuanOptions: [],
      xueyuanxuexifangxiangOptions: [],
      xueyuanjiuyezhuangtaiOptions: [],
    };
  },
  mounted() {
    var table = this.$storage.get("sessionTable");
    this.flag = table;
    this.$http({
      url: `${this.$storage.get("sessionTable")}/session`,
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.ruleForm = data.data;
      } else {
        this.$message.error(data.msg);
      }
    });
    this.jiangshixingbieOptions = "男,女".split(',')
    this.xueyuanxingbieOptions = "男,女".split(',')
    this.xueyuanshengyuanOptions = "大学生,在职人,离职人".split(',')
    this.xueyuanxuexifangxiangOptions = "硬件方向课程,软件方向课程,测试方向,游戏开发方向,影视剪辑方向,运营方向,网络安全方向,其它".split(',')
    this.xueyuanjiuyezhuangtaiOptions = "已就业,未毕业".split(',')
  },
  methods: {
    jiangshizhaopianUploadChange(fileUrls) {
      this.ruleForm.zhaopian = fileUrls;
    },
    xueyuantouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls;
    },
    onUpdateHandler() {
      if ((!this.ruleForm.jiangshigonghao) && 'jiangshi' == this.flag) {
        this.$message.error('讲师工号不能为空');
        return
      }
      if ((!this.ruleForm.mima) && 'jiangshi' == this.flag) {
        this.$message.error('密码不能为空');
        return
      }
      if ((!this.ruleForm.jiangshixingming) && 'jiangshi' == this.flag) {
        this.$message.error('讲师姓名不能为空');
        return
      }
      if (this.ruleForm.zhaopian != null) {
        this.ruleForm.zhaopian = this.ruleForm.zhaopian.replace(new RegExp(this.$base.url, "g"), "");
      }
      if ('jiangshi' == this.flag && this.ruleForm.nianling && (!isIntNumer(this.ruleForm.nianling))) {
        this.$message.error(`年龄应输入整数`);
        return
      }
      if ('jiangshi' == this.flag && this.ruleForm.lianxidianhua && (!isMobile(this.ruleForm.lianxidianhua))) {
        this.$message.error(`联系电话应输入手机格式`);
        return
      }
      if ((!this.ruleForm.xuehao) && 'xueyuan' == this.flag) {
        this.$message.error('学号不能为空');
        return
      }
      if ((!this.ruleForm.mima) && 'xueyuan' == this.flag) {
        this.$message.error('密码不能为空');
        return
      }
      if ((!this.ruleForm.xingming) && 'xueyuan' == this.flag) {
        this.$message.error('姓名不能为空');
        return
      }
      if (this.ruleForm.touxiang != null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url, "g"), "");
      }
      if ('xueyuan' == this.flag && this.ruleForm.nianling && (!isIntNumer(this.ruleForm.nianling))) {
        this.$message.error(`年龄应输入整数`);
        return
      }
      if ('xueyuan' == this.flag && this.ruleForm.shouji && (!isMobile(this.ruleForm.shouji))) {
        this.$message.error(`手机应输入手机格式`);
        return
      }
      if ('users' == this.flag && this.ruleForm.username.trim().length < 1) {
        this.$message.error(`用户名不能为空`);
        return
      }
      this.$http({
        url: `${this.$storage.get("sessionTable")}/update`,
        method: "post",
        data: this.ruleForm
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "修改信息成功",
            type: "success",
            duration: 1500,
            onClose: () => {
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
